<template>
  <el-row>
    <div class="block">
      <el-date-picker v-model="value2" type="datetimerange" range-separator="To" start-placeholder="起始日期" end-placeholder="结束日期" />
    </div>
    <div class="block">
      <el-select v-model="value3" placeholder="选择区域" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="block">
      <el-radio-group v-model="timeView" @change="updateView">
        <el-radio :label="1">按周</el-radio>
        <el-radio :label="2">按月</el-radio>
        <el-radio :label="3">按日</el-radio>
        <el-radio :label="4">默认</el-radio>
      </el-radio-group>
    </div>
  </el-row>
  <div>
    <el-card><div ref="chart" style="height: 300px; width: 1300px"></div></el-card>
    <el-card><div ref="chart2" style="height: 400px; width: 1300px"></div></el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, toRef, toRefs } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const value2 = ref([]);
const chart = ref();
const chart2 = ref();
const series_data2 = ref();
const series_data3 = ref();
const series_data4 = ref();
const series_data1 = ref();
const timeView = ref(4);
const value3 = ref("BB7CAH012490");
const options = [
  { value: "BB7CAH012490", label: "装配" },
  { value: "BB3CBK01230", label: "缸体M1" },
  { value: "BB4CBK02230", label: "缸体M2" },
  { value: "BB1CHD01190", label: "缸盖M1" },
  { value: "BB2CHD02190", label: "缸盖M2" },
  { value: "BB5CCK01150B", label: "曲轴" },
];

const updateView = () => {
  use_show_data_in_html2();
  use_show_data_in_html3();
};

const labelMapping = options.reduce((acc, item) => {
  acc[item.value] = item.label;
  return acc;
}, {});

const setTitle = () => {
  return `${labelMapping[value3.value]} 整线单台能耗`;
};

let initChart = async (hoursData,targetData) => {
  if (chart.value == null) {
    return;
  }

  echarts.dispose(chart.value);
  var myChart = echarts.init(chart.value);
  myChart.setOption({});

  let option = {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        var result = "";
        for (var i = 0; i < params.length; i++) {
          var param = params[i];
          if (i === 0) {
            result += param.name + "<br/>";
          }
          result += param.seriesName + ": " + param.value + "<br/>";
        }
        return result;
      },
    },
    legend: {
      data: ["能耗", "目标能耗"],
      orient: "horizontal", 
      left: "right", 
      top: "top", 
      itemGap: 10, 
    },
    title: {
      text: setTitle(),
      left: 'left',
      subtext: 'kwh',
      textStyle: {
        color: 'black', 
      },
      subtextStyle: {
        fontWeight: 'bold',
      },
    },
    xAxis: {
      type: "category",
      data: series_data1.value,
      axisLabel: { 
        formatter: timeView.value === 4 ? formatXAxis : '{value}',
        rotate: 45 
      }
    },
    dataZoom: [
      {
        type: "slider", 
        start: 0, 
        end: 100, 
      },
      {
        type: "inside", 
        start: 90, 
        end: 100, 
      },
    ],
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "能耗",
        type: "bar",
        data: hoursData,
        itemStyle: {
          normal: {
            color: function(params) {
              return params.value > targetData ? 'red' : '#00FF00';
            }
          }
        },
      },
      {
        name: "目标能耗",
        type: "line",
        symbol: 'none',
        color:'orange',
        data: Array(series_data1.value.length).fill(targetData),
        lineStyle: {
          color: 'ORANGE',
          width: 1 
        }
      },
    ],
  };

  myChart.setOption(option);
};

let initChart2 = async (prodEnergyData, nonProdEnergyData,productionHours,nonProductionHours,targetData,targetData2,hourtarget,hourtarget2) => {
  if (chart2.value == null) {
    return;
  }
  console.log('?',prodEnergyData);
  console.log('!',productionHours)
  echarts.dispose(chart2.value);
  var myChart2 = echarts.init(chart2.value);
  myChart2.setOption({});
  
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['生产小时能耗', '非生产小时能耗','单台总能耗','单台生产能耗','生产小时能耗目标','非生产小时能耗目标','单台总能耗目标','单台生产能耗目标'],
      orient: "horizontal", 
      left: "right", 
      top: "top", 
      itemGap: 10, 
    },

    xAxis: {
      type: 'category',
      data: series_data1.value,
      axisLabel: {
        formatter: timeView.value === 4 ? formatXAxis : '{value}', 
        rotate: 45
      }
    },
    dataZoom: [
      {
        type: "slider", 
        start: 0, 
        end: 100, 
      },
      {
        type: "inside", 
        start: 90, 
        end: 100, 
      },
    ],
    yAxis: [
      { 
        type: 'value',
        name: '小时能耗',
        position: 'left',
        offset: 20,
      },
      { 
        type: 'value',
        name: '单台能耗',
        position: 'right',
        offset: 20,
      }
    ],
    series: [

    {
        name: "生产小时能耗",
        type: "bar",
        data: prodEnergyData,
        yAxisIndex: 0,
        color: '#2ec7c9',
        itemStyle: {
          normal: {
            color: function(params) {
              return params.value > hourtarget ? 'red' : '#2ec7c9';
            }
          }
        },
      },
      {
        name: "非生产小时能耗",
        type: "bar",
        data: nonProdEnergyData,
        yAxisIndex: 1,
        color: '#b6a2de',
        itemStyle: {
          normal: {
            color: function(params) {
              return params.value > hourtarget2 ? 'red' : '#b6a2de';
            }
          }
        },
      },
      {
        name: "单台总能耗",
        type: "bar",
        data: productionHours,
        yAxisIndex: 1,
        color: '#5ab1ef',
        itemStyle: {
          normal: {
            color: function(params) {
              return params.value > targetData ? 'red' : '#5ab1ef';
            }
          }
        },
      },
      {
        name: "单台生产能耗",
        type: "bar",
        data: nonProductionHours,
        yAxisIndex: 1,
        color: '#ffb980',
        itemStyle: {
          normal: {
            color: function(params) {
              return params.value > targetData2 ? 'red' : '#ffb980';
            }
          }
        },
      },
      {
        name: "生产小时能耗目标",
        type: "line",
        symbol: 'circle',
        color:'#2ec7c9',
        data: Array(series_data1.value.length).fill(hourtarget),
        lineStyle: {
          color: '#2ec7c9', 
          width: 1 
        }
      },
      {
        name: "非生产小时能耗目标",
        type: "line",
        yAxisIndex: 1,
        symbol: 'circle',
        color:'#b6a2de',
        data: Array(series_data1.value.length).fill(hourtarget2),
        lineStyle: {
          color: '#b6a2de', 
          width: 1 
        }
      },
      {
        name: "单台总能耗目标",
        type: "line",
        yAxisIndex: 1,
        symbol: 'circle',
        color:'#5ab1ef',
        data: Array(series_data1.value.length).fill(targetData),
        lineStyle: {
          color: '#5ab1ef', 
          width: 1 
        }
      },
      {
        name: "单台生产能耗目标",
        type: "line",
        yAxisIndex: 1,
        symbol: 'circle',
        color:'#ffb980',
        data: Array(series_data1.value.length).fill(targetData2),
        lineStyle: {
          color: '#ffb980', 
          width: 1 
        }
      },
      
      
    ]
  };

  myChart2.setOption(option);
};

onMounted(() => {
  const today = new Date();
  const ago = new Date(today.getFullYear(), 0, 1, 8, 0, 0, 0);
  const tomorrow = new Date(today.setDate(today.getDate() + 1));
  tomorrow.setHours(8, 0, 0, 0);
  value2.value = [ago, tomorrow];
  use_show_data_in_html2();
  use_show_data_in_html3();
});

function formatDate(d: string) {
  var date = new Date(d);
  var YY = date.getFullYear() + "-";
  var MM = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
  var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
  var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return YY + MM + DD + " " + hh + mm + ss;
}

var construct_url = "";
var construct_url2 ="";
var product_url = "";
var target_url = "";
var target2_url = "";
watch([toRef(value2), toRef(value3)], ([newDateRange, newValue3]) => {
  const start_time = formatDate(newDateRange[0]);
  const end_time = formatDate(newDateRange[1]);
  const start_timeYYYYMMDD = start_time.split(' ')[0];
  const end_timeYYYYMMDD = end_time.split(' ')[0];
  let truncatedValue3;
  let productValue3;
  let extraValue3;

    truncatedValue3 = newValue3.slice(0, 3);
    productValue3 = newValue3.slice(3, 8);
    extraValue3 = newValue3.slice(8, 12); 

  construct_url = `http://10.64.35.32:8000/energy_analysis/get_energy_data/?start_time=${start_time}&end_time=${end_time}&item=${truncatedValue3}&page_size=100001`;
  product_url = `http://10.64.35.32:8000/man_ana_sql_server/get_GdHistory_data/?start_time=${start_timeYYYYMMDD}&end_time=${end_timeYYYYMMDD}&sub_area=${productValue3}&equipment_id=${extraValue3}&page_size=100001`;
  target_url = `http://10.64.35.32:8000/manufacture_analysis/get_ms_cycle_data/?&station=${truncatedValue3}&page_size=1&page=1`;
  target2_url = `http://10.64.35.32:8000/manufacture_analysis/get_ms_cycle_data/?&station=${truncatedValue3}&page_size=1&page=2`;
  use_show_data_in_html2();
  use_show_data_in_html3();
});
  
const use_show_data_in_html2 = async () => {
  console.log(construct_url);
  console.log(product_url);
  console.log(target2_url)
  const response = await axios.get(construct_url);
  const energyData = response.data;
  const response1 = await axios.get(product_url);
  const productionData = response1.data;
  const response2 = await axios.get(target_url);
  const targetData = response2.data[0].equipment_target_time;

  console.log(energyData);
  console.log(productionData);
  console.log('mb',targetData)

  const productionDataMap = productionData.reduce((acc, curr) => {
  const date = new Date(curr.production_date).toISOString().split('T')[0];
  if (!acc[date]) {
    acc[date] = 0; 
  }
  acc[date] += curr.sum || 0; 
  return acc;
}, {});

console.log('map',productionDataMap)
  let groupedData = {};
let periods = [];

switch (timeView.value) {
  case 1: 
    groupedData = groupByWeek(energyData, productionDataMap);
    break;
  case 2: 
    groupedData = groupByMonth(energyData, productionDataMap);
    break;
  case 3: 
    groupedData = groupByDay(energyData, productionDataMap);
    break;
  case 4: 
    groupedData = groupByDefault(energyData, productionDataMap);
    break;
  default:
    console.error('Invalid time view value:', timeView.value);
}

periods = Object.keys(groupedData).sort((a, b) => {
  const aParts = a.match(/(\d+)/g);
  const bParts = b.match(/(\d+)/g);
  if (aParts[0] !== bParts[0]) {
    return aParts[0] - bParts[0];
  }
  const isWeekA = a.includes('周');
  const isWeekB = b.includes('周');
  if (isWeekA && !isWeekB) return -1;
  if (!isWeekA && isWeekB) return 1; 
  if (isWeekA && isWeekB) {
    return aParts[1] - bParts[1];
  }
  if (!isWeekA && !isWeekB) {
    return aParts[1] - bParts[1];
  }
  return 0;
});

series_data1.value = periods;
  const productionHours = [];
  let prevVal = null;
  const processedDates = new Set<string>(); 

  Object.values(groupedData).forEach(records => {
    records.sort((a, b) => new Date(a.time) - new Date(b.time));
    let productionTotal = 0;
    let nonProductionTotal = 0;
    let totalProduction = 0;

    records.forEach(record => {
      const date = new Date(record.time).toISOString().split('T')[0];
    console.log(date)
    if (!processedDates.has(date)) {
      totalProduction += productionDataMap[date];
      processedDates.add(date); 
    }
  });

    records.forEach((record, index) => {
      if (prevVal !== null) {
        const diff = parseInt(record.val, 10) - prevVal;
        if (value3.value === 'BB5CCK01150B') { 
          if (diff > 100 && diff < 1000) { 
            productionTotal += diff;
          } else if (diff > 30 && diff <= 100) { 
            nonProductionTotal += diff;
          }
        } else if(value3.value === 'BB7CAH012490') {
          if (diff > 30 && diff < 1000) { 
            productionTotal += diff;
          } else if (diff >= 0 && diff <= 30) {
            nonProductionTotal += diff;
          }
        }else {
          if (diff > 60 && diff < 1000) { 
            productionTotal += diff;
          } else if (diff >= 0 && diff <= 30) {
            nonProductionTotal += diff;
          }
        }
      }
      prevVal = parseInt(record.val, 10);
    });

    let total = 0;
    let production = 0;

    if (totalProduction > 10) {
        total = ((productionTotal+ nonProductionTotal) / totalProduction).toFixed(2);
    }

    productionHours.push(total);

    if (totalProduction > 0) {
        series_data3.value = parseFloat(total);
        series_data4.value = parseFloat(production);
    }
    console.log('1',productionTotal)
    console.log('11',(productionTotal+nonProductionTotal))
    console.log('3',nonProductionTotal)
    console.log('4',totalProduction)
    productionTotal = 0;
    nonProductionTotal = 0;
  });


  initChart(productionHours,targetData);
};

const use_show_data_in_html3 = async () => {
  const response = await axios.get(construct_url);
  const energyData = response.data;
  const response1 = await axios.get(product_url);
  const productionData = response1.data;
  const response2 = await axios.get(target_url);
  const response3 = await axios.get(target2_url)
  const targetData = response2.data[0].equipment_target_time;
  const targetData2 = response2.data[0].push_pull_target_time;
  const hourtarget = response3.data[0].equipment_target_time;
  const hourtarget2 = response3.data[0].push_pull_target_time;


  const productionDataMap = productionData.reduce((acc, curr) => {
  const date = new Date(curr.production_date).toISOString().split('T')[0];
  if (!acc[date]) {
    acc[date] = 0; 
  }
  acc[date] += curr.sum || 0; 
  return acc;
}, {});

let groupedData = {};
let periods = [];

switch (timeView.value) {
  case 1: 
    groupedData = groupByDefault(energyData, productionDataMap);
    break;
  case 2: 
    groupedData = groupByDefault(energyData, productionDataMap);
    break;
  case 3: 
    groupedData = groupByDefault(energyData, productionDataMap);
    break;
  case 4: 
    groupedData = groupByDefault(energyData, productionDataMap);
    break;
  default:
    console.error('Invalid time view value:', timeView.value);
}

periods = Object.keys(groupedData).sort((a, b) => {
  const aParts = a.match(/(\d+)/g);
  const bParts = b.match(/(\d+)/g);
  if (aParts[0] !== bParts[0]) {
    return aParts[0] - bParts[0];
  }
  const isWeekA = a.includes('周');
  const isWeekB = b.includes('周');
  if (isWeekA && !isWeekB) return -1;
  if (!isWeekA && isWeekB) return 1; 
  if (isWeekA && isWeekB) {
    return aParts[1] - bParts[1];
  }
  if (!isWeekA && !isWeekB) {
    return aParts[1] - bParts[1];
  }
  return 0;
});

series_data1.value = periods;

  const productionEnergy = [];
  const nonProductionEnergy = [];
  const productionHours = [];
  const nonProductionHours = [];
  let prevVal = null;
  let productionHourCount = 0;
  let nonProductionHourCount = 0;
  const processedDates = new Set<string>(); 

  Object.values(groupedData).forEach(records => {
    records.sort((a, b) => new Date(a.time) - new Date(b.time));
    let productionTotal = 0;
    let nonProductionTotal = 0;
    let totalProduction = 0;

    records.forEach(record => {
      const date = new Date(record.time).toISOString().split('T')[0];
    console.log(date)
    if (!processedDates.has(date)) {
      totalProduction += productionDataMap[date];
      processedDates.add(date); 
    }
  });

    records.forEach((record, index) => {
      if (prevVal !== null) {
        const diff = parseInt(record.val, 10) - prevVal;
        if (value3.value === 'BB5CCK01150B') { 
          if (diff > 100 && diff < 1000) { 
            productionTotal += diff;
            productionHourCount++;
          } else if (diff > 30 && diff <= 100) { 
            nonProductionTotal += diff;
            nonProductionHourCount++;
          }
        } else if(value3.value === 'BB7CAH012490') {
          if (diff > 30 && diff < 1000) { 
            productionTotal += diff;
            productionHourCount++;
          } else if (diff >= 0 && diff <= 30) {
            nonProductionTotal += diff;
            nonProductionHourCount++;
          }
        }else {
          if (diff > 60 && diff < 1000) { 
            productionTotal += diff;
            productionHourCount++;
          } else if (diff >= 0 && diff <= 30) {
            nonProductionTotal += diff;
            nonProductionHourCount++;
          }
        }
      }
      prevVal = parseInt(record.val, 10);
    });
    const productionAvg = (productionTotal / productionHourCount).toFixed(2) || "0.00";
    const nonProductionAvg = (nonProductionTotal / nonProductionHourCount).toFixed(2) || "0.00";
    let total = 0;
    let production = 0;

    if (totalProduction > 10) {
        total = ((productionTotal+ nonProductionTotal) / totalProduction).toFixed(2);
        production = (productionTotal / totalProduction).toFixed(2);
    }

    productionEnergy.push(parseFloat(productionAvg));
    nonProductionEnergy.push(parseFloat(nonProductionAvg));
    productionHours.push(total);
    nonProductionHours.push(production);

    if (totalProduction > 0) {
        series_data3.value = parseFloat(total);
        series_data4.value = parseFloat(production);
    }
    console.log('1',productionTotal)
    console.log('11',(productionTotal+nonProductionTotal))
    console.log('2',productionHourCount)
    console.log('3',nonProductionTotal)
    console.log('4',totalProduction)
    productionTotal = 0;
    nonProductionTotal = 0;
    productionHourCount = 0;
    nonProductionHourCount = 0;
  });

  initChart2(productionEnergy, nonProductionEnergy,productionHours,nonProductionHours,targetData,targetData2,hourtarget,hourtarget2);
};

function normalizeToPeriod(date) {
  const startOfDay = new Date(date);
  startOfDay.setHours(8, 0, 0, 0);
  if (date < startOfDay) {
    startOfDay.setDate(startOfDay.getDate() - 1);
  }

  return startOfDay;
}

function groupByMonth(data, productionDataMap) {
  return data.reduce((acc, curr) => {
    const normalizedDate = normalizeToPeriod(new Date(curr.time));
    const month = normalizedDate.toLocaleString('default', { month: 'numeric' });
    if (!acc[month]) {
      acc[month] = [];
    }
    acc[month].push(curr);
    return acc;
  }, {});
}

function getMonthWeekNumber(date) {
  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
  const dayOfWeekFirstDay = (firstDayOfMonth.getDay() + 6) % 7;
  const daysSinceFirstDay = (date - firstDayOfMonth) / (24 * 60 * 60 * 1000); 
  return Math.ceil((daysSinceFirstDay + dayOfWeekFirstDay) / 7);
}

function groupByWeek(data, productionDataMap) {
  return data.reduce((acc, curr) => {
    const normalizedDate = normalizeToPeriod(new Date(curr.time));
    const month = normalizedDate.toLocaleString('default', { month: 'numeric' });
    const weekNumberInMonth = getMonthWeekNumber(normalizedDate);
    const key = `${month} 第${weekNumberInMonth}周`;
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(curr);
    return acc;
  }, {});
}

function groupByDay(data, productionDataMap) {
  return data.reduce((acc, curr) => {
    const normalizedDate = normalizeToPeriod(new Date(curr.time));
    const date = normalizedDate.toISOString().split('T')[0];
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push(curr);
    return acc;
  }, {});
}

function getDayPeriod(date) {
  // 创建一个新的Date对象，设置时间为当天的8:00
  const startOfDay = new Date(date);
  startOfDay.setHours(8, 0, 0, 0);

  // 如果当前时间早于当天8:00，则认为它属于前一天的周期
  if (date < startOfDay) {
    startOfDay.setDate(startOfDay.getDate() - 1);
  }

  // 返回格式化的日期字符串作为键值
  return startOfDay.toISOString().split('T')[0] + ' 8:00 - ' + 
         new Date(startOfDay.getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0] + ' 8:00';
}

function groupByDefault(data, productionDataMap, groupByDay) {
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth(); 
  const currentWeekStart = getWeekStartDate(today);
  const currentWeekNumber = getWeekNumber(today);

  const orderedKeys = [];
  const acc = {};
  const dailyRecords = new Map();

  data.forEach(item => {
    const currDate = normalizeToPeriod(new Date(item.time));
    const currMonth = currDate.getMonth(); 
    const currYear = currDate.getFullYear();
    const currDay = currDate.getDate();
    const currMonthStr = (currMonth + 1).toString().padStart(2, '0'); 
    const currDayStr = currDay.toString().padStart(2, '0');
    const currWeekNumberInMonth = getMonthWeekNumber(currDate); 

    let key;
    if (groupByDay) {
      key = `${currYear}-${currMonthStr}-${currDayStr}`; 
      const dateString = currDate.toISOString().split('T')[0];
      if (!dailyRecords.has(dateString)) {
        dailyRecords.set(dateString, []);
      }
      dailyRecords.get(dateString).push(item);
    } else {
      if (currYear < currentYear || (currYear === currentYear && currMonth < currentMonth)) {
        key = `${currMonthStr}月`; 
      } else if (currMonth === currentMonth && currWeekNumberInMonth < getMonthWeekNumber(currentWeekStart)) {
        key = `${currMonthStr}月第${currWeekNumberInMonth}周`; 
      } else if (currMonth === currentMonth && currWeekNumberInMonth === getMonthWeekNumber(currentWeekStart)) {
        key = `${currMonthStr}月${currDay}日`; 
      } else if (currMonth === currentMonth && currWeekNumberInMonth > getMonthWeekNumber(currentWeekStart)) {
        key = `${currMonthStr}月第${currWeekNumberInMonth}周`; 
      } else if (currYear > currentYear || (currYear === currentYear && currMonth > currentMonth)) {
        key = `${currMonthStr}月`; 
      } else {
        key = ''; 
      }

      if (!orderedKeys.includes(key)) {
        orderedKeys.push(key);
      }

      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(item);
    }
  });

  if (groupByDay) {
    dailyRecords.forEach((items, dateKey) => {
      acc[dateKey] = [items[items.length - 1]];
      orderedKeys.push(dateKey); 
    });
  }

  return orderedKeys.reduce((result, key) => {
    result[key] = acc[key];
    return result;
  }, {});
}

function getWeekNumber(date) {
  var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
  var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1 + (4 - (new Date(Date.UTC(d.getUTCFullYear(),0,1)).getUTCDay()||7))));
  var weekNo = Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
  return weekNo;
}

function getWeekStartDate(date) {
  
  var dayOfWeek = date.getDay(); 
  var startOfWeek = new Date(date);
  startOfWeek.setDate(startOfWeek.getDate() - dayOfWeek + (dayOfWeek == 0 ? -6 : 1)); 
  return startOfWeek;
}

function formatXAxis(value) {
  if (/^\d+日$/.test(value)) return value;
  if (/^\d{1,2}月$/.test(value)) return value;
  if (/^\d{1,2}月第\d+周$/.test(value)) return value; 
  return value;
}
</script>

<style scoped>
.el-radio {
  display: flex;
  align-items: center;
}

.el-radio__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%; /* 圆形 */
}

/* 选中状态 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: #409EFF; /* 选中时圆点颜色 */
  border-color: #409EFF; /* 选中时边框颜色 */
}

/* 选中状态的文字颜色 */
.el-radio__label {
  color: #333;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #409EFF; /* 选中时文字颜色 */
}
</style>